<template>
  <div class="xing">
    <div class="wuxiaoxi">
      <i
        :class="index1 >= index ? `active ${item}` : item"
        v-for="(item, index) in xing"
        :key="index"
        @click="add(index)"
      ></i>
      <span v-show="index1 == 0" style="color: red; font-size: 25px"
        >非常差</span
      >
      <span v-show="index1 == 1" style="color: blue; font-size: 25px">差</span>
      <span v-show="index1 == 2" style="color: green; font-size: 25px"
        >一般</span
      >
      <span v-show="index1 == 3" style="color: yellow; font-size: 25px"
        >良好</span
      >
      <span v-show="index1 == 4" style="color: pink; font-size: 25px"
        >好评</span
      >
    </div>
  </div>
</template>

<script>
export default {
  props: ["xing", "index1"],
  name: "",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    add(i) {
      this.$emit("add", i);
    },
  },
};
</script>
<style scoped lang="scss">
.xing {
  width: 600px;
  height: 400px;
  border: 1px solid #f00;
  margin: 30px auto;
  position: relative;
  .wuxiaoxi {
    height: 200px;
    line-height: 200px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    i {
      font-size: 50px;
    }
    .active {
      color: #f00;
      font-size: 50px;
    }
  }
}
</style>
